<template>
  <view class="content b-t" :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" > 
				<image src="../../static/newh5/fanhui.png" 
				class="yticon" 
				style="width: 13px;height: 20px;color:black" 
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">发票管理</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
    <view class="list b-b" v-for="(item, index) in invoiceList" :key="index">
      <view class="wrapper">
        <view class="address-box">
          <text v-if="item.isDefault" class="tag themeTextColor themeBorderColor">默认</text>
          <text class="address">{{item.title}} <!--{{item.address}}--></text>
        </view>
        <view class="u-box">
          <text class="name" v-if="item.invoiceType==='general'">{{dataDictMap.BILL_REQUEST['2']}}</text>
          <text class="name" v-else>{{dataDictMap.BILL_REQUEST['1']}}</text>
          <text class="mobile">{{item.phone}}</text>
        </view>
      </view>
      <text class="yticon icon-bianji" @click.stop="doInvoiceManage('modify', item.id)"></text>
      <image class="delete" mode="aspectFill" src="../../static/newh5/delete.png" @click.stop="doInvoiceRemove(item)"></image>
    </view>
    <button class="add-btn themeBgColor" @click="doInvoiceManage('add')">新增发票</button> 
  </view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import { removeInvoice,getInvoiceList } from '@/api/invoice/invoice'
import { dictService } from '@/common/utils/api.js'
export default {
  data() {
    return {
      dataDictMap: {'BILL_REQUEST':[]},
      dataDictLists: [],
      invoiceList:[]
    }
  },
  onShow(){
    dictService(this, ['BILL_REQUEST'])
    this.getData()
  },
  onLoad(option) {

  },
  methods: {
		returnIndex() {
				goback()
			},
    // 发票删除
    doInvoiceRemove(item){
      uni.showModal({
        title:'提示',
        content:'确定删除该发票？',
        confirmColor:'#000000',
        success:suc =>{
          if (suc.confirm){
            removeInvoice({id:item.id}).then(res=>{
              if (res.code === 0){
                this.getData()
              }else {
                this.toast(res.message)
              }
            })
          }
        }
      })

    },
    getData(){
      getInvoiceList({
        page:1,
        limit:100,
      }).then(res=>{
        if (res.code === 0){
          this.invoiceList = res.data.records
        }else {
          this.toast(res.message)
        }
      })
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        mask: false,
        icon: 'none'
      });
    },

    // 新增&编辑发票
    doInvoiceManage(type,id){
      uni.navigateTo({
        url: `/pages/invoice/invoice-modify?type=${type}&id=${id}`
      })
    },
  }
}
</script>

<style lang='scss'>
page {
  padding-bottom: 120upx;
}

.content {
  position: relative;
}

.list {
  display: flex;
  align-items: center;
  padding: 20upx 30upx;
  background: #fff;
  position: relative;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.delete {
  width: 40upx;
  height: 40upx;
  margin-left: 16upx;
}

.address-box {
  display: flex;
  align-items: center;

  .tag {
    font-size: 24upx;
    width: fit-content;
    text-align: center;
    color: $my-newh5-color;
    margin-right: 10upx;
    background: #fffafb;
    border: 1px solid $my-newh5-color;
    border-radius: 4upx;
    padding: 4upx 10upx;
    line-height: 1;
  }

  .address {
    font-size: 30upx;
    color: $font-color-dark;
  }
}

.u-box {
  font-size: 28upx;
  color: $font-color-light;
  margin-top: 16upx;

  .name {
    margin-right: 30upx;
  }
}

.icon-bianji {
  display: flex;
  align-items: center;
  height: 80upx;
  font-size: 40upx;
  color: $font-color-light;
  padding-left: 30upx;
}

.add-btn {
  position: fixed;
  left: 30upx;
  right: 30upx;
  bottom: 16upx;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  font-size: 32upx;
  color: #fff;
  // background-color: $my-newh5-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
